<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <!--弹窗内容-->
  <div class="app-container calendar-list-container" v-loading="loading">
      <div>
        <span class="title" style="margin-left: 30px;">模块主图:</span>
      </div>
      <el-form :label-position="labelPosition" label-width="150px" :model="form" ref="form">
        <el-form-item style="width: 600px;" label="来源:" prop="modular">
          <el-select v-model="form.modular" placeholder="请选择"  @change="changeGoodLeiMu">
            <el-option
              v-for="item in modularList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 600px;" label="模块栏目:" prop="bannerType" v-if="form.modular === '1'">
          <el-select v-model="form.bannerType"   @change="changeAppBanner">
            <el-option
              v-for="item in moduleList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 600px;" label="模块栏目:" prop="pcModule" v-if="form.modular === '2'">
          <el-select v-model="form.pcModule" @change="changePcModule">
            <el-option
              v-for="item in moduleList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 600px;" label="一级目录:" prop="levelOne" v-if="form.modular === '2'">
          <el-select v-model="form.levelOne" @change="changeLevelOne">
            <el-option
              v-for="item in levelOneList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 600px;" label="链接地址:" prop="levelTwo" v-if="form.levelOne">
          <el-input v-model="catalogOne.imgUrl" placeholder="请输入链接地址"></el-input>
        </el-form-item>
        <el-form-item style="width: 600px;" label="二级目录:" prop="levelTwo" v-if="form.levelOne">
          <el-select v-model="form.levelTwo" @change="changeLevelTwo">
            <el-option
              v-for="item in levelTwoList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 600px;" label="图片信息:" prop="levelTwo" v-if="form.levelTwo">
          <el-upload class="avatar-uploader" action="/app/sys/oss/upload" :show-file-list="false"
                     :on-success="handleCatalogSuccess">
            <img v-if="catalogObj.imgUrl" :src="catalogObj.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!--<el-input style="width: 500px!important;margin-left: 30px;" v-model="item.url" placeholder="请输入链接地址"></el-input>-->
        </el-form-item>
        <div v-if="selectModule.value && form.modular === '1'">
          <span class="title">图片信息:</span>
          <el-form-item :label="selectModule.label + ':'">
            <div class="imgItem" v-for="(item, index) in pictureList" :key="index">
              <div @click="checkBannerImgIndex(index)">
                <el-upload class="avatar-uploader" action="/app/sys/oss/upload" :show-file-list="false"
                           :on-success="handleBannerListSuccess">
                  <img v-if="item.picture" :src="item.picture" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <el-input style="width: 500px!important;margin-left: 30px;" v-model="item.url" placeholder="请输入链接地址"></el-input>
              <el-button @click="deleteBannerImgList(index)" v-if="pictureList.length > 1" style="margin-left: 30px;"
                         type="danger" icon="el-icon-delete" circle></el-button>
            </div>
            <el-button type="success" @click="addImgList">添加<i class="el-icon-plus el-icon--right"></i></el-button>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmUpload">确 定</el-button>
      </div>
  </div>

</template>

<script>
  import { getDictList } from '@/api/information'
  import { getBannerList, fanhallBanner, addPicture } from '@/api/goods'
  import { validatenull } from '@/util/validate'
  import { mapGetters } from 'vuex'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  export default {
    components: {
    },
    name: 'seller_index',
    directives: {
      waves
    },
    data() {
      return {
        loading: false, // loading
        labelPosition: 'right',
        dialogImageUrl: '', // 图片预览src
        modularList: [], // 模块列表
        selectModule: {}, // 选中模块
        columnType: '', // 类别
        bannerId: '', // bannerId
        dialogVisible: false,
        moduleList: [], // 轮播类型数组
        pictureList: [], // 图片列表
        pictureObj: [], // 图片信息
        levelOneList: [], // 一级目录列表
        levelTwoList: [], // 二级目录列表
        catalogOne: {}, // 一级目录详情
        catalogObj: {}, // 二级目录信息详情
        bannerImgIndex: 0, // 下标
        listQuery: { // 请求列表参数
          source: 1,
          pageNo: 1,
          pageSize: 6,
          keyword: ''
        },
        form: {
          bannerType: '',
          modular: '',
          pcBan: ''
        }
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    created() {
      const that = this
      that.loading = true
      getDictList('/app/dict/modular_type', {}).then(response => {
        that.loading = false
        const list = response.data.data
        list[0].description = 'banner管理'
        that.modularList = list
      })
      // const infoTypeUrl = '/app/mall/trends/list'
      // getDictList(infoTypeUrl, {}).then(response => {
      //   // that.infoTypeList = response.data.data
      // })
    },
    methods: {
      changeGoodLeiMu(type) { // 来源切换
        const that = this
        that.moduleList = []
        that.form.bannerType = ''
        if (type === '1') {
          that.loading = true
          getBannerList({}).then(response => {
            that.loading = false
            response.data.data.forEach(item => {
              const obj = {
                value: item.value,
                label: item.description
              }
              that.moduleList.push(obj)
            })
          })
        } else {
          const obj = {
            value: '/app/operate/menu/getList',
            label: '商城目录管理'
          }
          that.moduleList.push(obj)
          // const url = '/app/mall/trends/list'
          // getDictList(url, {}).then(response => {
          //   that.loading = false
          //   response.data.data.forEach(item => {
          //     const obj = {
          //       value: item.id,
          //       label: item.name
          //     }
          //     that.moduleList.push(obj)
          //   })
          // })
        }
      },
      changeAppBanner(val) { // 模块切换
        const that = this
        that.moduleList.forEach(item => {
          if (item.value === val) {
            that.selectModule = item
          }
        })
        // that.columnType = index
        that.pictureList = []
        fanhallBanner('/app/yykFashionLobby/bannerList/' + val, {}).then(response => {
          const map = response.data.data
          let list = []
          for (const i in map) {
            that.bannerId = i
            list = map[i]
          }
          if (list.length <= 0) {
            const obj = {
              picture: '',
              url: ''
            }
            list.push(obj)
          }
          that.pictureList = list
        })
      },
      changePcModule(val) { // pc模块切换
        const that = this
        that.levelOneList = []
        fanhallBanner(val, {}).then(response => {
          console.log(response)
          that.levelOneList = response.data.data
        })
      },
      changeLevelOne(val) { // 一级目录切换
        const that = this
        that.levelOneList.forEach(item => {
          if (val === item.id) {
            that.levelTwoList = item.menuDTO
            that.catalogOne = item
          }
        })
      },
      changeLevelTwo(val) { // 二级目录切换
        const that = this
        that.levelTwoList.forEach(item => {
          if (val === item.id) {
            that.catalogObj = item
          }
        })
      },
      checkBannerImgIndex(inx) { // 获取下标
        this.bannerImgIndex = inx
      },
      handleBannerListSuccess(res) { // banner图片上传
        this.pictureList[this.bannerImgIndex].picture = res.data
      },
      deleteBannerImgList(inx) { // 删除banner
        this.pictureList.splice(inx)
      },
      // 图片上传
      handlePcStyleSuccess(response, file, fileList) {
        this.pictureObj = {}
        // this.pictureList = fileList
        console.log(fileList)
      },
      // 图片上传
      handleCatalogSuccess(res) {
        this.catalogObj.imgUrl = res.data
      },
      // 图片删除
      handleRemove(file, fileList) {
        const that = this
        const arr = []
        this.pictureList = fileList
        for (let i = 0; i < that.pictureList.length; i++) {
          arr.push(that.pictureList[i].url)
        }
        const params = {
          columnType: that.columnType,
          pictures: arr
        }
        const editurl = '/app/yykFashionLobby/edit'
        addPicture(editurl, params).then(response => {
          console.log(response)
        })
      },
      addImgList() { // 图片添加
        const that = this
        let count = 0
        that.pictureList.forEach(item => {
          if (validatenull(item.picture)) {
            count++
          }
        })
        if (count > 0) {
          that.$message.error('请上传banner图片')
          return
        }
        const obj = {
          picture: '',
          url: ''
        }
        that.pictureList.push(obj)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      confirmUpload() { // 提交
        const that = this
        if (that.form.modular === '1') {
          // '/app/yykFashionLobby/add'
          const url = that.bannerId ? '/app/yykFashionLobby/edit' : '/app/yykFashionLobby/add'
          const params = {
            modularType: that.form.modular,
            columnType: that.form.bannerType,
            pictures: that.pictureList
          }
          if (that.bannerId) {
            params.id = that.bannerId
          }
          addPicture(url, params).then(response => {
            console.log(response)
            that.$message.success('提交成功')
            setTimeout(() => {
              that.$router.go(0)
            }, 500)
          })
        } else {
          const list = []
          const levelOneObj = {
            id: that.catalogOne.id,
            imgUrl: that.catalogOne.imgUrl
          }
          const levelTwoObj = {
            id: that.catalogObj.id,
            imgUrl: that.catalogObj.imgUrl
          }
          list.push(levelOneObj)
          list.push(levelTwoObj)
          addPicture('/app/operate/menu/updateImage', list).then(response => {
            that.$message.success('提交成功')
            setTimeout(() => {
              that.$router.go(0)
            }, 500)
          })
        }
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
<style scoped>
  .title{
    font-weight: bold;
    font-size: 24px;
  }

  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 80% !important;
  }
  .el-form {
    margin-left: 36px;
  }
  .is-disabled{
    background-color: #fff;
  }
  .inputRow{
    background-color: #fff !important;
    display: block;
    width: 65%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border: 1px solid #f5f5f5;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .textareaCon{
    width: 80%;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
  }
  .el-select{
    width: 80% !important;
  }
  .imgContent{
    padding: 5px;
  }
  .picContent{
    width: 100%;
  }
  .goodImg {
    width: 30px;
    height: 30px;
  }
  .topPic{
    width: 300px;
  }
  .el-input{
    width: 80%;
  }
  .avatar{
    width: 250px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .el-button--mini, .el-button--mini.is-round {
    padding: 7px 15px;
    margin-bottom: 10px
  }
  .el-button--primary {
    color: #fff;
    margin-left: 180px;
    width: 260px;
    background-color: #409EFF;
    border-color: #409EFF;
  }
  .imgItem {
    display: flex;
    align-items: center;
  }
</style>
